<template>
  <div class="card">
    <div class="card-header ac-content-title4">
      <!-- <img class="ling" src="../assets/card-h.svg" alt="" /> -->
      <img class="ju" src="../../../assets/images/cardTitle.png" alt="" />
      <div class="title">{{ title }}</div>
    </div>
    <div class="card-body"><slot></slot></div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "Card",
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
  },
});
</script>

<style lang="scss" scoped>
.card {
  padding: 14px;

  &-header {
    width: 100%;
    font-size: 14px;
    font-family: cn;
    position: relative;
    display: flex;
    overflow: hidden;
    // .border {
    //   width: 360px;
    //   height: 36px;
    //   position: absolute;
    //   border: 2px solid;

    //   border-image-source: conic-gradient(
    //     from 180deg at 48.94% 49.19%,
    //     rgba(61, 255, 255, 0) -43.29deg,
    //     #c2ffff 39.38deg,
    //     rgba(139, 255, 255, 0) 66.12deg,
    //     #3dffff 90deg,
    //     rgba(78, 255, 255, 0) 106.39deg,
    //     rgba(147, 255, 255, 0.609782) 171.73deg,
    //     rgba(61, 255, 255, 0) 225.41deg,
    //     rgba(61, 255, 255, 0) 316.71deg,
    //     #c2ffff 399.38deg
    //   );
    //   box-sizing: border-box;

    // }
    .ju {
      // position: absolute;
      top: 3px;
      left: 35px;
      right: 15px;
      // width: 360px;
      // height: 36px;
      // padding: 0;
    }

    .title {
      position: absolute;
      top: 12px;
      left: 53px;
      color: #ffffffee;
      font-family: "Microsoft YaHei";
    }
  }
  &-body {
    margin-top: 6px;
  }

  // position: absolute;
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  // background-position: center center;
  // left: 20px;
  // background-image: url("../../../assets/images/borderbg.png");
  // margin-bottom: 10px;
}
</style>
